<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>费用记录</title>
  </head>
  <body>
    <h2>费用记录</h2>
    <div class="container">
      <div class="balance-container">
        <h3 class="title">你的账户余额</h3>
        <h1 class="total">&yen;<span id="balance">0.00</span></h1>
        <div class="details-container">
          <div>
            <h4>收入</h4>
            <p class="money plus">&yen;<span id="money-plus">0.00</span></p>
          </div>
          <div>
            <h4>支出</h4>
            <p class="money minus">&yen;<span id="money-minus">0.00</span></p>
          </div>
        </div>
      </div>
      <div class="history-container">
        <h3 class="title">历史记录</h3>
        <ul class="list" id="list">
          <!-- <li class="minus">
            <span>描述</span>
            <span>8</span>
            <button class="delete-btn">x</button>
          </li>
          <li class="plus">
            <span>描述</span>
            <span>8</span>
            <button class="delete-btn">x</button>
          </li> -->
        </ul>
      </div>
      <div class="transaction-container">
        <h3 class="title">添加一笔流水账单</h3>
        <form id="form">
          <div>
            <label for="title">文案</label>
            <input type="text" id="title" placeholder="输入内容" />
          </div>
          <div>
            <label for="amount">
              金额
              <!-- 直接换行 -->
              <br />
              <span class="describe">负数(支出) | 正数(收入)</span>
            </label>
            <input type="number" id="amount" placeholder="输入金额" />
          </div>
          <button class="add-btn" type="submit">添加</button>
        </form>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
